<template>
  <div class="personal-center">
    <div class="profile-card">
      <div class="close-button">✕</div>
      <h2 class="section-title">个人中心</h2>

      <!-- 个人信息概览 -->
      <div class="user-profile">
        <div class="avatar-section">
          <img :src="userInfo.avatar" alt="用户头像" class="avatar" />
          <div class="upload-btn" @click="showAvatarDialog">
            <i class="el-icon-camera"></i>
          </div>
        </div>
        <div class="user-info">
          <div class="name-section">
            <h3>{{ userInfo.nickname }}</h3>
            <el-button 
              type="text" 
              class="edit-btn"
              @click="handleEdit"
            >
              <i class="el-icon-edit"></i>
              编辑资料
            </el-button>
          </div>
          <div class="user-tags">
            <el-tag 
              effect="dark" 
              class="level-tag"
              :data-level="userInfo.level"
              @click="goToBenefits"
            >
              <span class="level-text">{{ userInfo.level }}</span>
              <i class="el-icon-arrow-right"></i>
            </el-tag>
          </div>
          <div class="user-stats">
            <div class="stat-item">
              <span class="value">{{ userInfo.points }}</span>
              <span class="label">积分</span>
            </div>
            <div class="stat-item">
              <span class="value">{{ userInfo.balance }}</span>
              <span class="label">余额</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 快捷入口 -->
      <div class="quick-access">
        <h3 class="section-subtitle">我的服务</h3>
        <div class="access-grid">
          <router-link 
            :to="{
              path: '/my-benefits',
              query: {
                level: userInfo.levelValue,
                levelName: userInfo.level
              }
            }" 
            class="access-item"
          >
            <div class="access-icon" style="background: #e6f7ff">
              <i class="el-icon-present"></i>
            </div>
            <span>我的权益</span>
            <span class="badge" v-if="counters.benefits">{{
              counters.benefits
            }}</span>
          </router-link>

          <router-link to="/my-orders" class="access-item">
            <div class="access-icon" style="background: #f6ffed">
              <i class="el-icon-shopping-cart-full"></i>
            </div>
            <span>我的订单</span>
            <span class="badge" v-if="counters.orders">{{
              counters.orders
            }}</span>
          </router-link>

          <router-link to="/my-promotion" class="access-item">
            <div class="access-icon" style="background: #fff7e6">
              <i class="el-icon-share"></i>
            </div>
            <span>我的推广</span>
            <span class="badge" v-if="counters.promotion">{{
              counters.promotion
            }}</span>
          </router-link>
        </div>
      </div>

      <!-- 账号安全 -->
      <div class="account-security">
        <h3 class="section-subtitle">账号安全</h3>
        <el-card shadow="never" class="security-card">
          <div class="security-items">
            <div class="security-item">
              <i class="el-icon-mobile-phone"></i>
              <div class="security-info">
                <div class="title">手机绑定</div>
                <div class="desc">{{ userInfo.phone }}</div>
              </div>
              <el-button type="text" style="color: #3f5d62">修改</el-button>
            </div>
            <div class="security-item">
              <i class="el-icon-message"></i>
              <div class="security-info">
                <div class="title">邮箱绑定</div>
                <div class="desc">{{ userInfo.email || '未绑定邮箱' }}</div>
              </div>
              <el-button 
                type="text" 
                style="color: #3f5d62"
              >
                {{ userInfo.email ? '修改' : '绑定' }}
              </el-button>
            </div>
            <div class="security-item">
              <i class="el-icon-lock"></i>
              <div class="security-info">
                <div class="title">登录密码</div>
                <div class="desc">建议定期更换密码</div>
              </div>
              <el-button type="text" style="color: #3f5d62">修改</el-button>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 温馨提示 -->
      <div class="service-notice">
        <div class="notice-content">
          <i class="el-icon-warning-outline"></i>
          <span>如需帮助请联系在线客服，工作时间 09:00-22:00</span>
        </div>
      </div>
    </div>

    <!-- 添加编辑资料对话框 -->
    <el-dialog
      title="编辑个人资料"
      :visible.sync="dialogVisible"
      width="500px"
      custom-class="edit-dialog"
    >
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="昵称">
          <el-input v-model="editForm.nickname" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="editForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="editForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave" style="background: #3F5D62; border-color: #3F5D62">
          保 存
        </el-button>
      </span>
    </el-dialog>

    <!-- 添加头像选择对话框 -->
    <el-dialog
      title="选择头像"
      :visible.sync="avatarDialogVisible"
      width="500px"
      custom-class="avatar-dialog"
    >
      <div class="avatar-grid">
        <div 
          v-for="index in 12" 
          :key="index"
          class="avatar-option"
          :class="{ 'active': selectedAvatar === `avatar-${index}.png` }"
          @click="selectAvatar(`avatar-${index}.png`)"
        >
          <img :src="require(`@/assets/avatar/avatar-${index}.png`)" :alt="`头像${index}`" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="avatarDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAvatarChange" style="background: #3F5D62; border-color: #3F5D62">
          确 认
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "PersonalCenterView",
  data() {
    return {
      userInfo: {
        nickname: "张三",
        level: "黄金会员",
        levelValue: 3,
        phone: "138****8888",
        email: "zhang***@example.com",
        avatar: require("@/assets/avatar/avatar-10.png"),
        isVerified: true,
        points: 1280,
        balance: "￥680.00",
      },
      counters: {
        benefits: 2,
        orders: 1,
        promotion: null,
      },
      dialogVisible: false,
      editForm: {
        nickname: '',
        phone: '',
        email: ''
      },
      avatarDialogVisible: false,
      selectedAvatar: ''
    };
  },
  methods: {
    handleEdit() {
      this.editForm = {
        nickname: this.userInfo.nickname,
        phone: this.userInfo.phone,
        email: this.userInfo.email || ''
      };
      this.dialogVisible = true;
    },
    handleSave() {
      // 这里添加保存逻辑
      this.$message({
        type: 'success',
        message: '保存成功'
      });
      this.dialogVisible = false;
    },
    goToBenefits() {
      this.$router.push({
        path: '/my-benefits',
        query: {
          level: this.userInfo.levelValue,
          levelName: this.userInfo.level
        }
      });
    },
    showAvatarDialog() {
      // 从当前头像路径中提取文件名
      const currentAvatarPath = this.userInfo.avatar.split('/').pop();
      this.selectedAvatar = currentAvatarPath;
      this.avatarDialogVisible = true;
    },
    selectAvatar(avatarName) {
      this.selectedAvatar = avatarName;
    },
    confirmAvatarChange() {
      try {
        // 更新头像
        this.userInfo.avatar = require(`@/assets/avatar/${this.selectedAvatar}`);
        this.$message({
          type: 'success',
          message: '头像更新成功'
        });
        this.avatarDialogVisible = false;
      } catch (error) {
        this.$message({
          type: 'error',
          message: '头像更新失败，请重试'
        });
      }
    }
  }
};
</script>

<style scoped>
.personal-center {
  min-height: 50vh;
  padding: 40px 20px;
  background: #f8f9fa;
  display: flex;
  justify-content: center;
}

.profile-card {
  background-color: #fff;
  border-radius: 16px;
  padding: 30px;
  width: 100%;
  max-width: 1060px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.close-button {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 24px;
  cursor: pointer;
  color: #3f5d62;
  transition: all 0.3s ease;
}

.section-title {
  font-size: 2rem;
  color: #3f5d62;
  margin-bottom: 30px;
  text-align: left;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
}

.avatar-section {
  position: relative;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.upload-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-btn:hover {
  background: #3F5D62;
  color: white;
}

.user-info h3 {
  margin: 0 0 10px 0;
}

.user-tags {
  display: flex;
  gap: 10px;
}

.tag {
  padding: 4px 12px;
  background: #f0f7ff;
  color: #1890ff;
  border-radius: 20px;
  font-size: 0.9rem;
}

.info-form {
  margin-bottom: 40px;
}

.info-form h3,
.security-settings h3 {
  color: #3f5d62;
  margin-bottom: 20px;
}

.security-settings {
  margin-bottom: 30px;
}

.setting-items {
  background: #fafafa;
  border-radius: 12px;
  padding: 20px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #666;
}

.form-actions {
  text-align: center;
  margin: 30px 0;
}

.service-notice {
  padding: 20px 25px;
  background: linear-gradient(to right, #fff9e6, #fff5d6);
  border-radius: 12px;
  border: 1px solid rgba(230, 162, 60, 0.15);
  margin-top: 20px;
}

.notice-content {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #666;
  font-size: 0.95rem;
}

.notice-content i {
  color: #e6a23c;
  font-size: 1.4rem;
}

.user-stats {
  display: flex;
  gap: 30px;
  margin-top: 15px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-item .value {
  font-size: 1.2rem;
  color: black;
  font-weight: bold;
}

.stat-item .label {
  font-size: 0.9rem;
  color: #666;
  margin-top: 4px;
}

.quick-access {
  margin: 40px 0;
}

.section-subtitle {
  color: #3f5d62;
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.access-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.access-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #eee;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
}

.access-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.access-icon {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.access-icon i {
  font-size: 24px;
  color: #3f5d62;
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #f56c6c;
  color: white;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 12px;
}

.security-card {
  border-radius: 12px;
  margin-top: 15px;
}

.security-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.security-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.security-item i {
  font-size: 24px;
  color: #3f5d62;
}

.security-info {
  flex: 1;
}

.security-info .title {
  font-weight: bold;
  color: #333;
}

.security-info .desc {
  font-size: 0.9rem;
  color: #666;
  margin-top: 4px;
}

@media (max-width: 768px) {
  .user-profile {
    flex-direction: column;
    text-align: center;
  }

  .user-tags {
    justify-content: center;
  }

  .access-grid {
    grid-template-columns: 1fr;
  }

  .user-stats {
    justify-content: center;
  }
}

.name-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.edit-btn {
  padding: 0;
  font-size: 0.9rem;
  color: #3F5D62;
}

.edit-btn i {
  margin-right: 4px;
}

:deep(.edit-dialog) {
  border-radius: 12px;
}

:deep(.edit-dialog .el-dialog__header) {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

:deep(.edit-dialog .el-dialog__body) {
  padding: 30px 20px;
}

:deep(.edit-dialog .el-dialog__footer) {
  padding: 20px;
  border-top: 1px solid #eee;
}

:deep(.edit-dialog .el-input__inner) {
  border-radius: 8px;
}

.level-tag {
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
  height: 38px;
  border: none;
  box-shadow: 0 1px 3px rgba(63, 93, 98, 0.15);
  position: relative;
  overflow: hidden;
}

.level-tag:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: shine 1s forwards;
}

@keyframes shine {
  0% { left: -100%; }
  100% { left: 100%; }
}

.level-text {
  font-size: 0.85rem;
  font-weight: 500;
}

.level-tag i.el-icon-arrow-right {
  margin-left: 5px;
  font-size: 12px;
}

/* 针对不同等级显示不同的渐变色 */
.level-tag[data-level="普通会员"] {
  background: linear-gradient(45deg, #3F5D62, #537A80);
}

.level-tag[data-level="白银会员"] {
  background: linear-gradient(45deg, #95A5A6, #BDC3C7);
}

.level-tag[data-level="黄金会员"] {
  background: linear-gradient(45deg, #F1C40F, #F39C12);
}

.level-tag[data-level="钻石会员"] {
  background: linear-gradient(45deg, #3498DB, #2980B9);
}

/* 头像选择对话框样式 */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  padding: 10px;
}

.avatar-option {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.3s ease;
}

.avatar-option:hover {
  transform: scale(1.05);
}

.avatar-option.active {
  border-color: #3F5D62;
}

.avatar-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:deep(.avatar-dialog .el-dialog__body) {
  padding: 20px;
}
</style>